import {ITodoItem} from "../../App.tsx";
import styled from "@emotion/styled";
import {IconButton} from "@mui/material";
import HighlightOffIcon from "@mui/icons-material/HighlightOff";

type IProps = {
    data: ITodoItem;
    onItemDelete: (id: string) => void;

}

const CompletedTodoItemArea = ({data, onItemDelete}: IProps) => {

    return <>
        <Main>
            <Title draggable>
                {data.title}
            </Title>
            <DeleteButton>
                <HighlightOffIcon onClick={() => onItemDelete(data.id)} style={{fontSize: "40px"}}/>
            </DeleteButton>
        </Main>
    </>;
};

const Title = styled.div`
    outline: 1px solid black;
    padding: 8px;
    margin: 8px 0;
    border-radius: 4px;
    width: 250px;
    text-decoration: line-through; // 这是删除线
`;

const Main = styled.div`
    display: flex;
    align-items: center;
`;
const DeleteButton = styled(IconButton)`
    position: absolute;
    right: -50px;
`;
export default CompletedTodoItemArea;